<template>
  <div id="goods-consulting" class="goods-consulting">
    <div class="inner-consulting">
      <span class="consu-tip">因商家更改商品包装、场地、附配件等不做提前通知，且每位咨询者购买、提问时间等不同，为此，已购用户的回复不能作为长期参考，给您带来的不便还请谅解，谢谢！</span>
      <a href="javascript:" class="want-consu-btn" @click="handleShowAskDialog">我要咨询</a>
    </div>
    <div v-if="consulting" class="askAnswer">
      <div class="askAnswer-item" v-for="consult in consulting.data" :key="consult.ask_id">
        <div class="ask">
          <i class="icon-ask">问</i>
          <div class="item-con">
            <p>{{ consult.content }}</p>
            <div style="display: flex">
              <span class="member-name" :title="consult.member_name">{{ consult.member_name }}</span>
              <span>{{ consult.create_time | unixToDate }}</span>
            </div>
          </div>
        </div>
        <div class="answer">
          <i class="icon-answer">答</i>
          <i class="icon-answer" v-if="consult.reply_status === 'YES'" style="background: #b50005;margin-left: 3px;margin-right: 3px;">商</i>
          <div class="item-con">
            <ul class="answer-list" :id="'answer-' + consult.ask_id">
              <li v-if="consult.reply_status === 'YES'">
                <p>{{ consult.reply }}</p>
                <span class="item-info">商家回复 {{ consult.reply_time | unixToDate }}</span>
              </li>
              <li v-if="consult.reply_status === 'NO'">
                <p>{{ consult.first_reply.content }}</p>
                <span class="item-info">{{ consult.first_reply.member_name }} {{ consult.first_reply.reply_time | unixToDate }}</span>
              </li>
            </ul>
            <div class="more" v-if="consult.reply_num > 1">
              <a href="javascript:" :id="'show-' + consult.ask_id" class="J-spread spread" :data-answercount="consult.reply_num-1" :data-currpage="1" @click="handleShowMoreAnswer(consult.ask_id, consult.reply_status, consult.first_reply.id)">
                继续查看<em :class="'J-rest-answer-count-'+consult.ask_id">{{ consult.reply_num - 1 }}</em>条回答<i class="sprite-arrowDown"></i>
              </a>
              <a href="javascript:" :id="'close-' + consult.ask_id" class="J-retract retract" :data-answercount="consult.reply_num-1" @click="handleCloseMoreAnswer(consult.ask_id)">收起回答<i class="sprite-arrowUp"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      @current-change="handleCurrentPageChange"
      :current-page.sync="params.page_no"
      :page-size="params.page_size"
      layout="total, prev, pager, next"
      :total="consulting.data_total">
    </el-pagination>

    <!--问题咨询 dialog-->
    <el-dialog
      title="提问"
      :visible.sync="dialogAskVisible"
      width="450px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="goodsAskForm" :rules="goodsAskRules" ref="goodsAskForm">
        <el-form-item prop="ask_content">
          <el-input
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 4}"
            placeholder="请输入您的问题吧~(3-120字之间)"
            :maxlength="120"
            v-model="goodsAskForm.ask_content">
          </el-input>
        </el-form-item>
        <!--是否匿名-->
        <el-form-item prop="checked">
          <el-checkbox v-model="goodsAskForm.checked">匿名提问</el-checkbox>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAskVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitGoodsAskForm">发 布</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 商品咨询模块
 * 这里可以对商品进行咨询
 */
import * as API_Members from '@/api/members'
import Storage from '@/utils/storage'
import Vue from 'vue'
import { Checkbox } from 'element-ui'

Vue.use(Checkbox)
export default {
  name: 'goods-consulting',
  props: ['goodsId'],
  data() {
    return {
      params: {
        page_no: 1,
        page_size: 10
      },
      // 问题咨询 表单
      goodsAskForm: {
        ask_content: '',
        checked: true,
        anonymous: 'YES'
      },
      // 问题咨询 表单校验
      goodsAskRules: {
        ask_content: [
          { required: true, message: '请输入您的问题！', trigger: 'blur' }
        ]
      },
      // 问题咨询 dialog
      dialogAskVisible: false,

      consulting: '',

      reply: {
        page_no: 1,
        page_size: 10,
        reply_id: ''
      }
    }
  },
  mounted() {
    this.GET_Consulting()
  },
  methods: {
    /** 当页数发生改变时 */
    handleCurrentPageChange(page_no) {
      this.params.page_no = page_no
      this.GET_Consulting()
    },
    /** 显示咨询窗 */
    handleShowAskDialog() {
      if (!Storage.getItem('user')) {
        this.$confirm('您还未登录，要现在去登录吗？', () => {
          this.$router.push({ path: `/login?forward=${this.$route.path}` })
        })
        return false
      }
      this.dialogAskVisible = true
    },
    /** 商品咨询 表单提交 */
    submitGoodsAskForm() {
      this.$refs['goodsAskForm'].validate((valid) => {
        if (valid) {
          this.goodsAskForm.anonymous = this.goodsAskForm.checked ? 'YES' : 'NO'
          API_Members.consultating(this.goodsId, this.goodsAskForm.ask_content, this.goodsAskForm.anonymous).then(() => {
            this.dialogAskVisible = false
            this.goodsAskForm.ask_content = ''
            this.goodsAskForm.checked = true
            this.$message.success('发布成功')
            this.GET_Consulting()
          })
        } else {
          this.$message.error('表单填写有误，请核对！')
          return false
        }
      })
    },

    /** 查看更多回复 */
    handleShowMoreAnswer(ask_id, reply_status, reply_id) {
      // eslint-disable-next-line no-undef
      const _answer = $('#answer-' + ask_id)
      // eslint-disable-next-line no-undef
      const _show = $('#show-' + ask_id)
      // eslint-disable-next-line no-undef
      const _close = $('#close-' + ask_id)
      // eslint-disable-next-line no-undef
      const _count = $('.J-rest-answer-count-' + ask_id)

      if (reply_status === 'NO') {
        this.reply.reply_id = reply_id
      }

      var total = parseInt(_show.attr('data-answercount'))
      var pageNo = parseInt(_show.attr('data-currpage'))
      console.log(total)

      this.reply.page_no = pageNo

      API_Members.getGoodsAskReplys(ask_id, this.reply).then(response => {
        var answerLi = ''
        for (var i = 0; i < response.data.length; i++) {
          answerLi += '<li style=\'overflow: hidden;zoom: 1;word-break: break-word;\' class=\'li-' + ask_id + '\'>' +
            '<p style=\'width: 75%;padding: 10px 0 8px;line-height: 220%;float: left;color: #333;\'>' + response.data[i].content + '</p>' +
            '<span style=\'width: 25%;line-height: 220%;padding: 10px 0px 8px;text-align:right;float: left;color: gray;\'>' + response.data[i].member_name + ' ' +
            this.GET_DateFormat(response.data[i].reply_time * 1000, 'Y-M-D h:m:s') + '</span></li>'
        }

        _answer.append(answerLi)

        total = total - response.data.length
        _show.attr('data-answercount', total)
        _show.attr('data-currpage', pageNo + 1)

        console.log(total)

        if (total === 0) {
          _show.addClass('retract')
          _close.removeClass('retract')
        } else {
          _count.text(total)
        }
      })
    },

    /** 收起回复 */
    handleCloseMoreAnswer(ask_id) {
      // eslint-disable-next-line no-undef
      const _li = $('.li-' + ask_id)
      // eslint-disable-next-line no-undef
      const _show = $('#show-' + ask_id)
      // eslint-disable-next-line no-undef
      const _close = $('#close-' + ask_id)
      // eslint-disable-next-line no-undef
      const _count = $('.J-rest-answer-count-' + ask_id)

      var total = parseInt(_close.attr('data-answercount'))

      _li.remove()
      _show.removeClass('retract')
      _close.addClass('retract')

      _show.attr('data-answercount', total)
      _show.attr('data-currpage', 1)
      _count.text(total)
    },

    /** 获取咨询列表 */
    GET_Consulting() {
      API_Members.getGoodsConsultations(this.goodsId, this.params).then(response => {
        this.consulting = response
      })
    },

    /** 日期转换 */
    GET_DateFormat(number, format) {
      let time = new Date(number)
      let newArr = []
      let formatArr = ['Y', 'M', 'D', 'h', 'm', 's']
      newArr.push(time.getFullYear())
      newArr.push(this.GET_FormatNumber(time.getMonth() + 1))
      newArr.push(this.GET_FormatNumber(time.getDate()))

      newArr.push(this.GET_FormatNumber(time.getHours()))
      newArr.push(this.GET_FormatNumber(time.getMinutes()))
      newArr.push(this.GET_FormatNumber(time.getSeconds()))

      for (let i in newArr) {
        format = format.replace(formatArr[i], newArr[i])
      }
      return format
    },

    GET_FormatNumber(n) {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/color";
.goods-consulting {
  background-color: #fff;
  padding: 40px 30px 30px;
  .inner-consulting {
    position: relative;
    border: 1px solid #d7d7d7;
    height: 67px;
    padding: 10px 10px 20px 10px;
    background: url(../../assets/images/icon-goods-consulting-tip.png) no-repeat 10px 10px;
  }
  .consu-tip {
    color: #9b827d;
    height: 36px;
    left: 70px;
    line-height: 18px;
    position: absolute;
    top: 40px;
    width: 600px;
  }
  .want-consu-btn {
    padding: 5px 20px;
    background-color: $color-main;
    border-color: $color-main;
    color: #fff;
    position: absolute;
    top: 30px;
    right: 30px;
    &:hover {
      background-color: darken($color-main, 10%)
    }
  }
  .content-consulting {
    border-top: 1px dashed #ccc;
    margin-top: 20px;
  }
  .item-consulting {
    margin-top: 15px;
  }
  .cons-left {
    float: left;
    width: 70px;
    .face-consulting, .name-consulting {
      width: 50px;
      height: 50px;
      text-align: center;
    }
    .name-consulting {
      height: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .cons-right {
    float: left;
    box-sizing: border-box;
    width: 900px - 70px;
    min-height: 100px;
    padding: 20px;
    background-color: #fafafa;
    .time-cons {
      padding: 10px;
      text-align: right;
      font-size: 14px;
      border-bottom: 1px dashed #ccc;
    }
    .box-cons {
      width: 900px - 70px - 40px;
      background-color: #fff;
      min-height: 50px;
      margin-top: 10px;
      box-sizing: border-box;
      padding: 10px;
      p {
        color: $color-main
      }
      p.reply-cons {
        color: #666;
      }
    }
  }
  /deep/ .el-pagination {
    text-align: right;
    padding: 10px 0;
  }
  .askAnswer .askAnswer-item {
    padding-top: 18px;
    border-bottom: 1px solid #ddd;
  }
  .askAnswer .askAnswer-item .answer-list li, .askAnswer .askAnswer-item .ask {
    overflow: hidden;
    zoom: 1;
  }
  .askAnswer .icon-ask {
    background: #f91;
  }
  .askAnswer .icon-answer {
    background: #9b1;
    margin-top: 15px;
  }
  .askAnswer .icon-answer, .askAnswer .icon-ask {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    float: left;
  }
  .askAnswer .askAnswer-item .item-con {
    margin-left: 25px;
    overflow: hidden;
    zoom: 1;
  }
  .askAnswer .ask-wrap, .askAnswer .askAnswer-item .item-con {
    font-family: "microsoft yahei";
    font-size: 14px;
  }
  .askAnswer .ask-wrap, .askAnswer .askAnswer-item .answer .item-con .answer-list li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    word-wrap: break-word;
  }
  .askAnswer .askAnswer-item .ask .item-con {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    word-wrap: break-word;
  }
  .askAnswer .askAnswer-item .ask .item-con p {
    font-weight: 700;
  }
  .askAnswer .askAnswer-item .item-con p {
    float: left;
    color: #333;
  }
  .askAnswer .askAnswer-item .ask p {
    width: 75%;
  }
  .askAnswer .askAnswer-item .item-con span {
    color: #999;
  }
  .askAnswer .askAnswer-item .member-name {
    margin-right: 5px;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
  .askAnswer .askAnswer-item .item-con .item-info {
    width: 25%;
    line-height: 220%;
    padding: 10px 0px 8px;
    text-align: right;
  }
  .askAnswer .askAnswer-item .answer p {
    width: 75%;
    padding: 10px 0 8px;
    line-height: 220%;
  }
  .askAnswer .askAnswer-item .answer .item-con .more {
    line-height: 100%;
    padding-bottom: 18px;
  }
  .askAnswer .askAnswer-item .answer .item-con .more a {
    color: #005ea7;
  }
  .askAnswer .askAnswer-item .answer .item-con .more .sprite-arrowDown {
    display: inline-block;
    width: 9px;
    height: 5px;
    background-image: url(../../assets/images/sprite.png);
    background-position: -28px -48px;
    margin-left: 5px;
    vertical-align: 1px;
  }
  .askAnswer .askAnswer-item .answer .retract {
    display: none;
  }
  .askAnswer .askAnswer-item .answer .item-con .more .sprite-arrowUp {
    display: inline-block;
    width: 9px;
    height: 5px;
    background-image: url(../../assets/images/sprite.png);
    background-position: -37px -48px;
    margin-left: 5px;
    vertical-align: 1px;
  }
}
</style>
